Conversation
✅ Deploy Preview for commercelayer-app-elements ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
commit: |
…eResourceList and stories
There was a problem hiding this comment.
Pull request overview
Adds classic prev/next pagination as an alternative to infinite scrolling for the useResourceList / FilteredList resource listing utilities (default remains infinite scroll).
Changes:
- Introduces
paginationType?: "infinite" | "pagination"and overloadsuseResourceListto return aPaginationcomponent in pagination mode. - Replaces
infiniteFetcherwithlistFetchersupporting both infinite and classic pagination behaviors. - Adds a
PaginationInfoUI component and Storybook stories demonstrating pagination (including table variant), and forwardspaginationTypethroughuseResourceFilters→FilteredList.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/docs/src/stories/resources/useResourceList.stories.tsx | Adds Storybook examples for the new pagination mode (list + table). |
| packages/app-elements/src/ui/resources/useResourceList/useResourceList.tsx | Adds pagination mode, state, UI integration, and type-safe overloads. |
| packages/app-elements/src/ui/resources/useResourceList/reducer.ts | Updates fetcher import to listFetcher. |
| packages/app-elements/src/ui/resources/useResourceList/metricsApiClient.ts | Updates Resource type import to listFetcher. |
| packages/app-elements/src/ui/resources/useResourceList/listFetcher.ts | Renames and extends fetcher to support both infinite and page-number pagination. |
| packages/app-elements/src/ui/resources/useResourceList/PaginationInfo.tsx | New pagination controls UI (prev/next + range label). |
| packages/app-elements/src/ui/resources/useResourceFilters/useResourceFilters.tsx | Forwards paginationType and renders returned Pagination component when enabled. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
packages/app-elements/src/ui/resources/useResourceList/useResourceList.tsx
Outdated
Show resolved
Hide resolved
packages/app-elements/src/ui/resources/useResourceList/useResourceList.tsx
Show resolved
Hide resolved
packages/app-elements/src/ui/resources/useResourceList/PaginationInfo.tsx
Outdated
Show resolved
Hide resolved
packages/app-elements/src/ui/resources/useResourceList/useResourceList.tsx
Show resolved
Hide resolved
packages/app-elements/src/ui/resources/useResourceList/useResourceList.tsx
Outdated
Show resolved
Hide resolved
packages/app-elements/src/ui/resources/useResourceList/useResourceList.tsx
Show resolved
Hide resolved
… and smooth scrolling on page change
…Ds and improve scroll behavior on page change
malessani
left a comment
There was a problem hiding this comment.
I tested the new pagination on storybook, when a click on next, the focus is at the bottom of the page, is it possible to prevent this? Or at least send the user to the top of the paginated list?
I've updated the logic by adding |
What I did
Added support for classic prev/next pagination to
useResourceList, alongside the existing infinite scroll mode. The newpaginationTypeprop controls which mode is used —"infinite"remains the default, so there are no breaking changes.Changes
paginationType?: "infinite" | "pagination"toUseResourceListConfiginfiniteFetcher→listFetcher(supports both modes internally)PaginationInfocomponent with prev/next buttons, page range display, and scroll-to-top on page changeuseResourceListreturns aPaginationcomponent whenpaginationType: "pagination"is set (type-safe via function overloads)useResourceFilters→FilteredListforwardspaginationTypeautomaticallyUsage examples
Basic pagination:
Via
FilteredList(fromuseResourceFilters):Default (infinite scroll, unchanged):
How to test
WithPaginationorWithPaginationAsTableStorybook stories under Resources / useResourceListpaginationTypeis omittedChecklist